<!DOCTYPE html>
<html>
	<head>
		<title>
			相册切换效果
		</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			ul {
				list-style: none;
				overflow: hidden;
			}
			li{
				float: left;
				margin-left: 10px;
				margin-top: 20px;
				width: 46px;
				height: 26px;
				border: 2px solid #fff;
	 
			}
			ul li.active{
				border-color: red;
			}
		</style>
	</head>
	<body>
		<img src="images/1.jpeg" width="300" id="bigImage">
		<ul>
			<li class="active">
				<a href="#">
					<img src="images/1.jpeg" width="46" class="smallImage">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/2.jpeg" width="46" class="smallImage">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/3.jpeg" width="46" class="smallImage">
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/4.jpeg" width="46" class="smallImage">
				</a>
			</li>
		</ul>
	 
		<script type="text/javascript">
			//获取事件源
			var bigObj = document.getElementById('bigImage');
			var smallObj = document.getElementsByClassName('smallImage');
	 
			//遍历集合，给每个img标签添加事件
			for(var i =0;i<smallObj.length;i++){
				smallObj[i].onmouseover = function(){
					//在悬浮前清除所有li的class属性
					for(var j =0;j<smallObj.length;j++){
						smallObj[j].parentNode.parentNode.setAttribute('class','');
					}
					//当悬浮到这张图片，设置他属性class为active
					this.parentNode.parentNode.setAttribute('class','active');
					//获取到悬浮图片的src
					var smallImageSrc = this.getAttribute('src');
					bigObj.setAttribute('src',smallImageSrc);
				}
			}
	 
		</script>
	</body>
</html>